import React, { Component } from "react";
import { Button, Form, Row, Col, Select, DatePicker, Input } from "antd";
import Zcon from "@cbd/icon";

const { Item } = Form;
const { RangePicker } = DatePicker;
const { Option } = Select;

@Form.create()
class FormCom extends Component {
  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 0 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 0 },
        sm: { span: 16 }
      }
    };
    return (
      <div>
        <Form onSubmit={this.props.handleSearch}>
          <Row gutter={24}>
            <Col span={7}>
              <Item label="推送目标" {...formItemLayout}>
                {this.props.getFieldDecorator(`planAddress`)(
                  <Input placeholder="推送目标" style={{ width: "100%" }} />
                )}
              </Item>
            </Col>
            <Col span={7}>
              <Item label="计划名称：" {...formItemLayout}>
                {this.props.getFieldDecorator(`planName`)(
                  <Select
                    placeholder="请选择计划名称"
                    // style={{ width: 250 }}
                  >
                    {this.props.planList.map(item => (
                      <Option key={item.planId} value={item.planId}>
                        {item.planName}
                      </Option>
                    ))}
                  </Select>
                )}
              </Item>
            </Col>
            <Col span={7}>
              <Item label="推送场景：" {...formItemLayout}>
                {this.props.getFieldDecorator(`sceneName`)(
                  <Select
                    placeholder="请选择推送场景"
                    style={{ width: "100%" }}
                    // style={{ width: 250 }}
                  >
                    {this.props.STList.map(item => (
                      <Option
                        value={`${item.sceneTemplateId}`}
                        key={item.sceneTemplateId}
                      >
                        {item.templateName}
                      </Option>
                    ))}
                  </Select>
                )}
              </Item>
            </Col>
            <Col span={3} />
            <Col span={7}>
              <Item label="推送渠道：" {...formItemLayout}>
                {this.props.getFieldDecorator(`channel`)(
                  <Select
                    placeholder="请选择推送渠道"
                    style={{ width: "100%" }}
                    // style={{ width: 250 }}
                  >
                    {this.props.channelList.map(item => (
                      <Option
                        value={item.pushChannelId * 1}
                        key={item.pushChannelId}
                      >
                        {item.description}
                      </Option>
                    ))}
                  </Select>
                )}
              </Item>
            </Col>
            <Col span={7}>
              <Item label="归属部门：" {...formItemLayout}>
                {this.props.getFieldDecorator(`department`)(
                  <Select placeholder="请选择归属部门">
                    {this.props.departData.map(item => (
                      <Option key={item.ownerDept} value={item.ownerDept}>
                        {item.ownerDeptName}
                      </Option>
                    ))}
                  </Select>
                )}
              </Item>
            </Col>
            <Col span={7}>
              <Item label="分发时间：" {...formItemLayout}>
                {this.props.getFieldDecorator(`timeCreate`)(
                  <RangePicker
                    showTime
                    // style={{ width:  }}
                    style={{ width: "100%" }}
                  />
                )}
              </Item>
            </Col>
            <Col span={3} style={{ marginLeft: -33, marginTop: 4 }}>
              <div
                style={{
                  width: "calc(66.66666% + 70px)",
                  display: "flex",
                  justifyContent: "flex-end"
                }}
              >
                <Button
                  style={{ marginRight: 8 }}
                  type="primary"
                  htmlType="submit"
                >
                  查询
                </Button>
                <Button
                  style={{ marginRight: 11 }}
                  onClick={this.props.handleReset}
                >
                  重置
                </Button>
                <Zcon
                  type="up-o"
                  style={{
                    width: 16,
                    fontSize: 16,
                    color: "rgba(0,0,0,0.65)",
                    fontWeight: 500,
                    marginTop: 8
                  }}
                  onClick={this.props.setNone}
                />
              </div>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}

export default FormCom;
